
import styled from 'styled-components';
import React, { CSSProperties, useState } from 'react';
import { convertFileSrc } from '@tauri-apps/api/core';

import APP_LOGO from '../../../assets/react.svg';

import { openApplication } from '../../../components';
import { InstalledApplication } from '@/services/local';

export interface InstalledApplicationGridItemProps {
    style?: CSSProperties;
    item: InstalledApplication;
    active?: boolean;
    onDoubleClick?: (item: InstalledApplication) => Promise<void>;
    onClick?: (item: InstalledApplication) => Promise<void>;
}

const InstalledApplicationGridItem: React.FC<InstalledApplicationGridItemProps> = (props: any) => {

    return (
        <ItemContainer
            style={props.style}
        >
            <Icon
                src={props.item.icon && props.item.icon != '' ? convertFileSrc(props.item.icon, 'asset') : APP_LOGO}
                onDoubleClick={async () => {
                    props.onDoubleClick && await props.onDoubleClick(props.item)
                }}
                onClick={async () => {
                    props.onClick && await props.onClick(props.item)
                }} />
            <Title
                onDoubleClick={async () => {
                    props.onDoubleClick && await props.onDoubleClick(props.item)
                }}
                onClick={async () => {
                    props.onClick && await props.onClick(props.item)
                }}
            >{props.item.name}</Title>
            {
                props.active && <Mask onDoubleClick={async () => {
                    props.onDoubleClick && await props.onDoubleClick(props.item)
                }}
                    onClick={async () => {
                        props.onClick && await props.onClick(props.item)
                    }}>
                </Mask>
            }
        </ItemContainer>
    );
}


export interface InstalledApplicationGridProps {

    style?: CSSProperties;

    layout?: 'horizontal' | 'vertical';

    items: Array<InstalledApplication>;

    activeKey: string | null;

    onChange: (application: InstalledApplication | null) => Promise<void>;
}

export const InstalledApplicationGrid: React.FC<InstalledApplicationGridProps> = (props: any) => {

    return (
        <Container style={{
            ...props.style,
            ...(props.layout === 'vertical' ? {
                flexDirection: 'column'
            } : {
                flexDirection: 'row'
            })
        }}>
            {
                props.items && props.items.map((item, index) => {
                    return (
                        <InstalledApplicationGridItem
                            key={index}
                            item={item}
                            style={{
                                width: '90px',
                                height: '90px',
                            }}
                            active={props.activeKey && item.identifier === props.activeKey}
                            onClick={async (item) => {
                                props.onChange(item);
                            }}
                            onDoubleClick={async (item) => {
                                await openApplication(item);
                            }}
                        ></InstalledApplicationGridItem>
                    );
                })
            }
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
`;

const ItemContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    position: relative;
`;

const Icon = styled.img`
    background-color: #FFFFFF;
    border-radius: 6px;
    width: 40px;
    height:40px;
    cursor: pointer;
`;

const Title = styled.div`
    font-size: 12px;
    text-align: center;
    line-height: 12px;
    /* color: #FFFFFF; */
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
`;

const Mask = styled.div`
    background-color: #dedede;
    opacity: 0.7;
    cursor: pointer;
    position: absolute;
    width:90%;
    height:90%;
    top:5%;
    left:5%;
`;